<template>
  <div class="contain-report">
    <div class="report-title">我的信息</div>
    <div class="report-form">
      <el-form ref="form" label-width="80px" size="medium">
        <el-form-item label="姓名:">
          <el-input placeholder="请输入姓名" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input placeholder="请输入电话" v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="学号:">
          <el-input placeholder="请输入学号" v-model="form.studentNumber"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 50px auto;display: flex;justify-content: center">
      <el-button type="primary" @click="changeForm">更改信息</el-button>
    </div>
  </div>
</template>

<script>
import {studentData} from "../../api/student";

export default {
  data() {
    return {
      userInfo: {},
      form: {
        phone: "",
        studentNumber: "",
        userName: ""
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('user'))
    this.form.phone = this.userInfo.phone
    this.form.studentNumber = this.userInfo.studentNumber
    this.form.userName = this.userInfo.userName
  },
  methods: {
    async changeForm() {
      for (let key in this.form) {
        if (!this.form[key]) {
          return this.$message.error('请将参数填写完整')
        }
      }
      const {data} = await studentData(this.form)
      if (data.code === 200) {
        this.$message.success('修改成功,请重新登录!')
        sessionStorage.clear()
        setTimeout(() => {
          this.$router.go(0)
        }, 2000)
      }
    }
  },
}
</script>

<style scoped lang="less">
.contain-report {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .report-title {
    font-size: 22px;
    color: #666;
  }

  .report-form {
    width: 50%;
    height: 200px;
    margin: 0 auto;
  }
}
</style>
